<template>
	<view class="parking-card">
		<scroll-view class="scroll-view_H" scroll-y="true" @scroll="scroll" scroll-left="120">
			<view v-if="parkingInfo.id">
				<!-- 展开状态展示 -->
				<view class="mgb bd1">
					<view class="card-header">
						<view class="title mgb10">{{ parkingInfo.expandTitle }}</view>
						<!-- 收藏按钮 -->
						<view class="mark-area" @click="handleMark">
							<uni-icons :type="isMark ? 'star' : 'star-filled'" size="22" color="#FFC300"></uni-icons>
						</view>
					</view>
					<view class="expand-info">
						<view class="info-item mgb10">地址：{{ parkingInfo.expandAddress }}</view>
						<view class="tag-group">
							<view :class="['tag orange']">
								<text>{{ parkingInfo.expandTagText1 }}</text>
							</view>
							<view :class="['tag green']">
								<text>{{ parkingInfo.expandTagText2 }}</text>
							</view>
							<view :class="['tag blue']">
								<text>{{ parkingInfo.expandTagText3 }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="fee-standard">
					<view class="fee-title mgtb">收费标准</view>
					<view class="fee-card">
						<text class="fee-letter">P</text>
						<view class="fee-detail">
							<text>车场编号：{{ parkingInfo.feeInfo.parkNo }}</text>
							<text>收费类区：{{ parkingInfo.feeInfo.zoneType }}</text>
							<text>车位数量：{{ parkingInfo.feeInfo.parkCount }}</text>
							<text>停车场名：{{ parkingInfo.feeInfo.parkName }}</text>
						</view>
					</view>
					<view class="fee-rule">
						<text>收费依据：{{ parkingInfo.feeInfo.feeBase }}</text>
						<text>计费方式：{{ parkingInfo.feeInfo.feeMode }}</text>
						<view class="fee-table">
							<view class="table-header">
								<text>时段</text>
								<text>收费时间</text>
								<text>收费标准</text>
							</view>
							<view class="table-row" v-for="(item, index) in parkingInfo.feeInfo.feeList" :key="index">
								<text>{{ item.period }}</text>
								<text>{{ item.time }}</text>
								<text>{{ item.fee }}</text>
							</view>
						</view>
					</view>
					<view class="">
						<view class="btn btn-primary fl" plain @click="openLocation">
							<view class="pdr10"><uni-icons type="paperplane" size="16" color="#FFFFFF"></uni-icons>
							</view>
							<text>查看路线</text>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="pdb">
				<view class="fl-rsb mgb">
					<text>推荐停车场</text>
					<view class="tag blue">距离最近</view>
				</view>
				<!-- 自动推荐 -->
				<view class="card-collapse cardview mgb">
					<view class="desc mgb5">距您最近的停车场</view>
					<view class="card-header">
						<text class="title">{{ parkingInfo.title }}</text>
						<!-- 收藏按钮 -->
						<view class="mark-area" @click="handleMark">
							<uni-icons :type="isMark ? 'star' : 'star-filled'" size="22" color="#FFC300"></uni-icons>
						</view>
					</view>
					<view class="card-body">
						<view class="address">{{ parkingInfo.address }}</view>
						<view class="status-wrap">
							<view :class="['tag']">
								<text>{{ parkingInfo.statusText }}</text>
							</view>
							<view :class="['tag orange']">
								<text>{{ parkingInfo.typeText }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue'

	const props = defineProps({
		parkingInfo: {
			type: Object,
			required: true
		}
	})

	const tagStyle = computed((num) => {
		let style
		if (num >= 5) {
			style = 'green';
		} else if (num < 5 && num != 0) {
			style = 'blue'
		} else {
			style = 'gray'
		}
		return style;
	});

	const isExpanded = ref(false)
	const openLocation = (item) => {
		// 调用【跨端】地图API打开定位
		console.log('触发查看路线逻辑', props.parkingInfo)
		if(!props.parkingInfo.longitude){
			uni.showToast({
				title: '无定位信息！',
				icon: 'none'
			});
			return
		}
		uni.openLocation({
			latitude: Number(props.parkingInfo.latitude),
			longitude: Number(props.parkingInfo.longitude),
			scale: 18, // 缩放级别，取值范围为5~18  
			name: parkingInfo.expandTitle, // 可选，位置名称  
			address: props.parkingInfo.expandAddress  // 可选，位置详细描述  
		});
	};
</script>

<style scoped>
	.mark-area {
		position: absolute;
		right: 0px;
		top: 0px;
		z-index: 5;
	}

	.parking-card {
		width: 100%;
		border-radius: 8px;
	}

	.card-collapse .desc {
		font-size: 12px;
		color: rgba(87, 171, 255, 1);
	}

	.card-collapse .title {
		font-size: 36rpx;
		font-weight: normal;
	}

	.card-collapse,
	.card-expand {
		border-radius: 5px;
		background: linear-gradient(180deg, rgba(239, 247, 255, 1) 0%, rgba(221, 238, 255, 0) 100%);
		border: 1rpx solid rgba(87, 171, 255, 0.5);
		padding: 12px;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	.title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}

	.distance-tag {
		font-size: 12px;
		color: #999;
		background-color: #f5f5f5;
		padding: 4px 8px;
		border-radius: 4px;
		margin-left: 8px;
	}

	.star-icon {
		width: 20px;
		height: 20px;
	}

	.card-body {
		margin-top: 8px;
	}

	.address {
		font-size: 14px;
		color: rgba(153, 153, 153, 1);
		margin-bottom: 12rpx;
	}

	.status-wrap {
		display: flex;
		gap: 8px;
	}

	.status-item,
	.type-tag,
	.tag-item {
		padding: 4px 8px;
		border-radius: 4px;
		color: #fff;
		font-size: 12px;
	}

	/* 展开部分样式 */
	.card-expand {
		animation: expandShow 0.3s ease;
	}

	@keyframes expandShow {
		from {
			opacity: 0;
			transform: translateY(-10px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.expand-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		box-shadow: 0px 0px 8px rgba(110, 110, 110, 0.3);
	}

	.expand-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}

	.expand-info {
		margin-bottom: 12px;
	}

	.info-item {
		font-size: 14px;
		color: #666;
		display: block;
		margin-bottom: 4px;
	}

	.tag-group {
		display: flex;
		gap: 6px;
		margin-top: 6px;
	}

	.fee-standard {
		border-radius: 6px;
	}

	.fee-title {
		font-size: 14px;
		font-weight: bold;
		color: #333;
	}

	.fee-card {
		display: flex;
		align-items: center;
		background-color: #409eff;
		color: #fff;
		padding: 10px;
		border-radius: 4px;
		margin-bottom: 8px;
	}

	.fee-letter {
		font-size: 60px;
		font-weight: bold;
		width: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.fee-detail {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.fee-rule {
		background-color: #fff;
		padding: 10px;
		border-radius: 4px;
	}

	.fee-table {
		width: 100%;
		border-collapse: collapse;
		margin-top: 6px;
	}

	.table-header,
	.table-row {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #eee;
		padding: 6px 0;
	}

	.table-header text {
		font-weight: bold;
	}

	.route-btn {
		margin-top: 12px;
		background-color: #409eff;
		color: #fff;
		border-radius: 4px;
	}
</style>